<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .all{
            width: 500px;
            height: 50px;
            position: relative;
            background-color: gray;
        }
        .cloud {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: aqua;
            position: absolute;
            top: 0px;
            left: 0px;
            opacity: .5;
        }
        li {
            cursor: pointer;
            list-style: none;
            float: left;
            text-align: center;
            height: 40px;
            line-height: 40px;
            margin-left: 0px;
            width: 100px;
            padding-left: 0px;
        }
        ul {
            margin: 0;
            height: 50px;
            line-height: 50px;
            padding-top: 7px;
            padding-left: 20px;
        }
    </style>
    <script>
        window.addEventListener('load',function(){
            var foc = document.querySelector('.all');
            var cloud = document.querySelector('p');
            var lis = document.querySelectorAll('li');
            console.log(lis,cloud)
            // 给所有的小li绑定事件
            // current作为筋斗云的起始位置
            var current = 0;
            for (var i = 0; i < lis.length; i++) {
                // 鼠标经过当前小li的位置作为目标值
                lis[i].addEventListener('mouseenter', function(){
                    animate(cloud, this.offsetLeft);
                });
                // 鼠标离开小li ，回到起始位置
                lis[i].addEventListener('mouseleave', function() {
                    animate(cloud, current);
                });
                // 鼠标点击，就把当前位置作为目标值
                lis[i].addEventListener('click', function() {
                    current = this.offsetLeft;
                });
            }
        })
        // 动画函数的封装 动画必须要定位 obj 目标对象 target 目标位置
        function animate(obj, target, callback) {
            console.log(obj)
                // 如果不断点击，导致动画速度变快，因为开启太多的定时器，解决方案：让元素只有一个定时器执行
                // 先清除以前的定时器，只保留当前的一个定时器执行
                clearInterval(obj.timer);
                // 给不同的元素指定了不同的定时器
                /* 不用给timer开辟新的内存空间，而是使用的是obj的一个属行，这样做节省资源，提高性能*/
                obj.timer = setInterval(function() {
                    // 步长值写在定时器里面 步长公式：(目标值 - 现在的位置) / 10
                    var step = (target - obj.offsetLeft) / 10;
                    // 小数要取整 才能保证盒子移动到整数目标位置
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    if (obj.offsetLeft == target) {
                        // 停止动画，本质是停止定时器
                        clearInterval(obj.timer);
                        // 回调函数一定写在定时器结束里面
                        callback&&callback();
                    }
                    // 盒子移动距离
                    // 把每次加1 这个步长值改为一个慢慢变小的值 
                    obj.style.left = obj.offsetLeft + step + 'px';
            
                }, 30);
            }
    </script>
</head>

<body>
    <!-- 精斗云
        鼠标经过某个小li,精斗云跟着到当前位置；
        鼠标离开这个li，精斗云复原到原来位置；
        鼠标点击了某个小li，精斗云停在所点击li的位置
    -->
    <div class="all">
        <p class="cloud"></p>
        <ul>
            <li class="li1"><a href="#">师资力量</a></li>
            <li class="li1"><a href="#">的悔不当初吧</a></li>
            <li class="li1"><a href="#">的开水不响</a></li>
            <li class="li1"><a href="#">福娃他</a></li>
        </ul>
    </div>
</body>
</html>